<template>
  <div>
    <!-- 导航 -->
    <NavBar class="bar">
      <template v-slot:right>
        <router-link to="/search" tag="i" class="iconfont icon-icon-search"></router-link>
      </template>
      <template v-slot:center>
        <p class="font-title ellipsis">{{address.name}}</p>
      </template>
      <template v-slot:left>
        <router-link :to="userInfo._id?'/userinfo':'/login'" class="login">
          <div v-if="!userInfo._id">
            {{userInfo._id}}
            <a href="/login">登录</a>
            <span class="pl-1 pr-1 white">|</span>
            <a href="/login">注册</a>
          </div>
          <div v-else class="icon">
            <i class="iconfont icon-geren white" ></i>
          </div>
        </router-link>
      </template>
    </NavBar>
    <!-- 轮播图 -->
    <div>
      <div class="pt-3  border-b bg-white" v-if="categories">
        <swiper :options="swiperOptions" >
          <swiper-slide v-for="(category,i) in categoryArr" :key="i" >
            <ul class="display-flex wrap jc-between text-center " >
              <li v-for="item in category" :key="item.id" style="width: 25%" class="mb-6">
                <img :src="baseImageUrl + item.image_url" width="50px" height="50px">
                <div class="font-m grey-2 pt-1">{{item.title}}</div>
              </li>
            </ul>
          </swiper-slide>
          <div class="swiper-pagination mt-5" slot="pagination" ></div>
        </swiper>
      </div>
      <div v-else>
        <img src="./images/msite_back.svg" alt="">
      </div>
    </div>
    <!-- 商家列表 -->
    <ShopList class="bg-white"/>

  </div>
</template>

<script>
  import NavBar from "../../components/NavBar/NavBar";
  import ShopList from "../../components/ShopList/ShopList";
  import {mapState}  from 'vuex'
export default {
  name: 'Home',
  data(){
    return {
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable:true
        },
        autoHeight:true,
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swipe
        // Some Swiper option/callback...
      },
      baseImageUrl: 'https://fuss10.elemecdn.com',
      bseUrl:'https://gitee.com/warm_indignation/vue-gshop/tree/master/src/views/Home/images/shop'
    }
  },
  components:{
    NavBar,
    ShopList
  },
  computed:{
    //...是对象展开符
    // let arr = [1,2,3]
    // console.log(...arr) //1,2,3
    ...mapState(['address','categories','userInfo']),
    //根据 categories 一维数组生成二维数组,二维数组中的元素个数是 8 个
    categoryArr(){
      const {categories} = this
      //准备一个空数组
      const bigArr = []
      let smallArr = []
      categories.forEach(item => {
        // 思路：
        //  (1)先把每一个数组读取出来，分别存入小数组中，当小数组长度为8时，重新创建一个小数组，继续存入
        //  (2)如何存进大数组中呢？
        //         当小数组的长度为0时存入大数组
        // 如果当前小数组长度为8，创建一个新的
        if (smallArr.length === 8){
          smallArr = []
        }
        if(smallArr.length === 0 ){
          bigArr.push(smallArr)
        }
        smallArr.push(item)
      })
      return bigArr
    }
  },

}
</script>

<style lang="scss" scoped>
  @import "../../assets/scss/main";
  .bar{
    .iconfont {
      font-size: 1.923rem;
    }
    .icon {
      .iconfont {
        font-size: 1.538rem;

      }
    }
    .login{
      a {
        color: white;
        font-size: 1.077rem;
      }
    }
  }
  .swiper-container{
    --swiper-pagination-color: #02a774;/* 两种都可以 */
  }


</style>
